<template>
  <div class="home">
    <!-- <van-button block type="info" @click="$router.push({name:'driverList',query:{cardNo}})" >查看以前备案记录</van-button> -->
    <van-form validate-first @submit="onSubmit">
      <!-- 通过 pattern 进行正则校验 -->
      <van-field input-align="right"
                 label="驾驶员姓名"
                 v-model="formData.driver_name"
                 name="pattern"
                 placeholder="请输入姓名"
                 :rules="[{ required: true }]"
      />
      <van-field input-align="right"
                 label="驾驶员身份证号"
                 v-model="formData.driver_cardno"
                 name="cardnoexe"
                 @input="getUserInfo"
                 placeholder="请输入身份证号"
                 :rules="[{ pattern:cardnoexe,required: true }]"
      />
      <van-field input-align="right"
                 label="驾驶员联系方式"
                 v-model="formData.driver_tel"
                 name="pattern"
                 placeholder="请输入联系方式"
                 :rules="[{ pattern,required: true }]"
      >
        <template #button>
          <van-button size="small" type="primary">发送验证码</van-button>
        </template>
      </van-field>
      <!---->
      <van-field input-align="right"
                 label="验证码"
                 v-model="formData.verificationCode"
                 name="pattern"
                 @change="getRisk"
                 placeholder="请输入验证码"
                 :rules="[{ required: true }]"
      />
      <van-field input-align="right"
                 label="是否去过高风险地区"
                 v-model="formData.quguo_high_risk"
                 name="pattern"
                 readonly
                 placeholder="高风险地区"
      />
      <!--<van-field input-align="right"-->
      <!--           label="核酸检测数据"-->
      <!--           name="pattern"-->
      <!--&gt;-->
      <!--  <template #button>-->
      <!--    <van-button size="small" type="primary" @click='getNucleicAcid'>获取核酸检测数据</van-button>-->
      <!--  </template>-->
      <!--</van-field>-->
      <van-field input-align="right"
                 label="核酸结果"
                 v-model="formData.hesuan_result"
                 name="pattern"
                 readonly
                 placeholder="核酸结果"
      />
      <!---->
      <van-field input-align="right"
                 label="车牌号"
                 v-model="formData.car_number"
                 name="pattern"
                 readonly
                 @click="keyState = true"
                 placeholder="请选择车牌号"
                 :rules="[{ required: true }]"
      />
      <van-field input-align="right"
                 readonly
                 clickable
                 label="车辆车牌颜色"
                 :value="projectNameValue.lable"
                 placeholder="请选择车辆车牌颜色"
                 @click="showPicker_t = true"
      />
      <van-field input-align="right"
                 readonly
                 clickable
                 label="车辆类别"
                 :value="projectNameValue1.lable"
                 placeholder="请选择车辆类别"
                 @click="showCategory = true"
      />
      <van-field input-align="right"
                 label="道路运输证号"
                 v-model="formData.dlys_no"
                 name="pattern"
                 placeholder="请输入道路运输证号"
                 :rules="[{ required: true }]"
      />
      <!--      <van-dropdown-menu>-->
      <!--        <van-dropdown-item v-model="value1" :options="option1" />-->
      <!--        <van-dropdown-item v-model="value2" :options="option2" />-->
      <!--      </van-dropdown-menu>-->
      <!-- <van-field input-align="right"
        label="道路运输"
        v-model="formData.dlys"
        name="pattern"
        placeholder="请输入道路运输"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      /> -->
      <van-field v-if="isInAndOuts == 2 || isInAndOuts == 3" input-align="right" name="radio" label="是否为进口冷链车辆">
        <template #input>
          <van-radio-group v-model="formData.car_is_ll" direction="horizontal">
            <van-radio name="1" >是</van-radio>
            <van-radio name="2" >否</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <!---->
      <!--<div class='uploaderOut'>-->
      <!--  <van-field  name="uploader" :rules="[{ required: true, message: '请上传图片' }]" input-align="right" label="从业资格证(限制上传2张)">-->
      <!--    <template #input>-->
      <!--      <van-uploader :max-count="2" :before-delete="deleteImage" v-model="jck_cyzgz" name="jck_cyzgz" :after-read="afterRead" />-->
      <!--    </template>-->
      <!--  </van-field>-->
      <!--  <div class='bottom'></div>-->
      <!--</div>-->
      <van-field input-align="right"
                 label="从业资格证号"
                 v-model="formData.people_cy_no"
                 name="pattern"
                 placeholder="请输入从业资格证号"
                 :rules="[{ required: true }]"
      />
      <van-field input-align="right"
                 label="来返沈住址"
                 v-model="formData.arrive_address"
                 name="pattern"
                 placeholder="请输入来返沈住址"
                 :rules="[{ required: true }]"
      />
      <van-field input-align="right"
                 readonly
                 clickable
                 label="来沈时间"
                 :value="formData.arrive_time"
                 placeholder="请选择来沈时间"
                 @click="goIntime = true"
      />
      <!--<van-field input-align="right"-->
      <!--           readonly-->
      <!--           clickable-->
      <!--           label="在沈时间"-->
      <!--           :value="projectNameValue2.lable"-->
      <!--           placeholder="请选择在沈时间"-->
      <!--           @click="leaveTime = true"-->
      <!--/>-->
      <van-field input-align="right" name="radio" label="在沈时间">
        <template #input>
          <van-radio-group v-model="formData.zssj" direction="horizontal">
            <van-radio name="1" >当天离沈</van-radio>
            <van-radio name="2" >在沈过夜</van-radio>
            <van-radio name="3" >空车返沈</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field input-align="right"
                 label="出发地"
                 v-model="formData.origin"
                 readonly
                 clickable
                 placeholder="请选择出发地"
                 @click="showOrigin = true"
      />
      <van-field input-align="right"
                 label="途经地"
                 v-model="formData.tjd"
                 placeholder="请输入途经地"
                 name="pattern"
                 :rules="[{ required: true }]"
      />
      <van-field input-align="right"
                 label="到沈区"
                 readonly
                 name="pattern"
                 placeholder="请选择到沈区"
                 v-model="formData.dsq"
                 @click="showPicker1 = true"
      />
      <!---->
      <div v-if="isInAndOuts == 2 || isInAndOuts == 3">
        <div v-for="(item,index) in formData.goodsList" :key="index">
          <!-- 入沈是卸货  出沈是装货-->
          <van-field input-align="right"
                     v-if="index === 0 && isInAndOuts != 3"
                     label="卸货区"
                     readonly
                     name="pattern"
                     placeholder="请选择卸货区"
                     v-model="formData.goodsList[index].ascription_code"
                     @click="showPicker = true"
          />
          <van-field input-align="right"
                     v-if="index === 0 && isInAndOuts != 1"
                     label="物品装货地"
                     readonly
                     name="pattern"
                     placeholder="请选择物品装货地"
                     :value="formData.goodsList[index].goods_pretend?formData.goodsList[index].goods_pretend_s + ',' + formData.goodsList[index].goods_pretend:''"
                     @click="showPickerZ = true"
          />
          <!-- <van-field input-align="right"
          v-if="isInAndOuts != 3"
          :label="'物品名称'+(index+1)"
          v-model="formData.goodsList[index].goods_name"
          name="pattern"
          placeholder="请输入物品名称"
          /> -->
          <!-- <van-field input-align="right"
          v-if="isInAndOuts != 3"
            :label="'物品卸货时间'+(index+1)"
            @focus="checkoutTimeChange(index)"
            readonly
            v-model="formData.goodsList[index].goods_discharge_time"
            name="pattern"
            placeholder="请输入物品卸货时间"
          /> -->
          <div class="btn" v-if="index > 0" @click="removeInfo(index)"><van-icon name="minus" /> <span>删除货物信息</span></div>
          <van-field input-align="right"
                     v-if="isInAndOuts != 3"
                     :label="'物品卸货地'+(index+1)"
                     v-model="formData.goodsList[index].goods_discharge"
                     name="pattern"
                     placeholder="请输入物品卸货地"
          />
          <van-field input-align="right"
                     v-if="isInAndOuts != 3"
                     :label="'收货人姓名'+(index+1)"
                     v-model="formData.goodsList[index].receiving_name"
                     name="pattern"
                     placeholder="请输入收货人姓名"
          />
          <van-field input-align="right"
                     v-if="isInAndOuts != 3"
                     :label="'收货人手机号码'+(index+1)"
                     v-model="formData.goodsList[index].receiving_tel"
                     name="pattern"
                     placeholder="请输入手机号码"
          >
            <!--<template #button>-->
            <!--  <van-button size="small" type="primary">发送验证码</van-button>-->
            <!--</template>-->
          </van-field>
          <van-field input-align="right"
                     v-if="isInAndOuts != 3"
                     :label="'物品卸货单位'+(index+1)"
                     v-model="formData.goodsList[index].receiving_dw"
                     name="pattern"
                     placeholder="请输入物品卸货单位"
          />
          <!--<van-field input-align="right"-->
          <!--           label="是否去过高风险地区"-->
          <!--           v-model="formData.goodsList[index].quguo_high_risk"-->
          <!--           name="pattern"-->
          <!--           readonly-->
          <!--           placeholder="高风险地区"-->
          <!--/>-->
          <!--<van-field input-align="right"-->
          <!--           label="核酸检测数据"-->
          <!--           name="pattern">-->
          <!--  <template #button>-->
          <!--    <van-button size="small" type="primary" @click='getNucleicAcid'>获取核酸检测数据</van-button>-->
          <!--  </template>-->
          <!--</van-field>-->
          <!--<van-field input-align="right"-->
          <!--           label="核酸结果"-->
          <!--           v-model="formData.goodsList[index].hesuan_result"-->
          <!--           name="pattern"-->
          <!--           readonly-->
          <!--           placeholder="核酸结果"-->
          <!--/>-->
          <!--  -->
        </div>
        <div class="btn" v-if="isInAndOuts != 3" @click="addInfo"><van-icon name="plus" /> <span>添加货物信息</span></div>
      </div>
      <div v-for="(item,index) in formData.peerList" :key="index+'p'">
        <div class="btn" v-if='index > 0' @click="removePeople(index)"><van-icon name="minus" /> <span>删除同行人</span></div>
        <van-field input-align="right"
                   :label="'同行人姓名'+(index+1)"
                   v-model="formData.peerList[index].passenger_name"
                   name="pattern"
                   placeholder="请输入同行人姓名"
        />
        <van-field input-align="right"
                   :label="'同行人身份证号'+(index+1)"
                   v-model="formData.peerList[index].passenger_cardno"
                   name="pattern"
                   placeholder="请输入同行人身份证号"
        />
        <van-field input-align="right"
                   :label="'同行人手机号码'+(index+1)"
                   v-model="formData.peerList[index].passenger_tel"
                   name="pattern"
                   placeholder="请输入手机号码"
        >
          <template #button>
            <van-button size="small" type="primary">发送验证码</van-button>
          </template>
        </van-field>
        <van-field input-align="right"
                   label="是否去过高风险地区"
                   v-model="formData.peerList[index].quguo_high_risk"
                   name="pattern"
                   readonly
                   placeholder="高风险地区"
        />
        <!--<van-field input-align="right"-->
        <!--           label="核酸检测数据"-->
        <!--           name="pattern"-->
        <!--&gt;-->
        <!--  <template #button>-->
        <!--    <van-button size="small" type="primary" @click='getNucleicAcid'>获取核酸检测数据</van-button>-->
        <!--  </template>-->
        <!--</van-field>-->
        <van-field input-align="right"
                   label="核酸结果"
                   v-model="formData.peerList[index].hesuan_result"
                   name="pattern"
                   readonly
                   placeholder="核酸结果"
        />
        <!--  -->
      </div>
      <div class="btn" @click="addPeople"><van-icon name="plus" /> <span>添加同行人信息</span></div>
      <div v-if="formData.car_is_ll != 2 && isInAndOuts != 1">
        <van-field  name="uploader" :rules="[{ required: true, message: '请上传图片' }]" input-align="right" label="进出口清单(限制上传2张)">
          <template #input>
            <van-uploader :max-count="2" :before-delete="deleteImage" v-model="jck_qd" name="jck_qd" :after-read="afterRead" />
          </template>
        </van-field>
        <van-field  name="uploader" :rules="[{ required: true, message: '请上传图片' }]" input-align="right" label="进出口检疫检验证明(限制上传2张)">
          <template #input>
            <van-uploader :max-count="2" :before-delete="deleteImage" v-model="jck_jyzm" name="jck_jyzm" :after-read="afterRead" />
          </template>
        </van-field>
        <van-field  name="uploader" :rules="[{ required: true, message: '请上传图片' }]" input-align="right" label="核酸检测证明(限制上传2张)">
          <template #input>
            <van-uploader :max-count="2" :before-delete="deleteImage" v-model="hs_zm" name="hs_zm" :after-read="afterRead" />
          </template>
        </van-field>
        <van-field  name="uploader" :rules="[{ required: true, message: '请上传图片' }]" input-align="right" label="消杀证明(限制上传2张)">
          <template #input>
            <van-uploader :max-count="2" :before-delete="deleteImage" v-model="xs_zm" name="xs_zm" :after-read="afterRead" />
          </template>
        </van-field>
      </div>
      <div style="margin: 16px">
        <span class="prompt">一切表单内容真实有效，否则承担法律责任</span>
        <van-button block type="info" native-type="submit" >备案</van-button>
      </div>
    </van-form>

    <!-- 日期 -->
    <van-popup v-model="showDate" round position="bottom">
      <van-datetime-picker
        @confirm="getConfirm"
        @cancel="showDate = false"
        :min-date="minDate"
        type="datehour"
        title="选择年月日时"
      />
    </van-popup>
    <keyword :isShow="keyState" @exit="confirm" @inputchange="getKey" :oinp="formData.car_number" @ok="confirm"/>

    <!-- 到沈区 -->
    <van-popup v-model="showPicker1" round position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        value-key="name"
        @cancel="showPicker1 = false"
        @confirm="onConfirm1"
      />
    </van-popup>
    <!-- 卸货区 -->
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        value-key="name"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
    <!-- 装货地 -->
    <van-popup v-model="showPickerZ" round position="bottom">
      <van-area title="装货地" @confirm="onConfirmZ" :area-list="areaList" :columns-num="2" @cancel="showPickerZ = false" />
    </van-popup>
    <!-- 出发地 -->
    <van-popup v-model="showOrigin" round position="bottom">
      <van-area title="出发地" @confirm="onConfirmOrigin" :area-list="areaList" :columns-num="2" @cancel="showOrigin = false" />
    </van-popup>
    <!--途经地-->
    <van-popup v-model="showThrough" round position="bottom">
      <div class='addressOut'>
        <div class='titleArea' v-for='(item,index) in areaList.city_list' :key='index'>
          {{item}}
        </div>
      </div>
      <!--<van-area title="出发地" @confirm="onConfirmOrigin" :area-list="areaList" :columns-num="2" @cancel="showOrigin = false" />-->
    </van-popup>
    <!-- 车辆车牌颜色 -->
    <van-popup  v-model="showPicker_t" round position="bottom">
      <van-picker
        title="请选择车辆车牌颜色"
        show-toolbar
        :columns="projectListArr"
        value-key="lable"
        @cancel="showPicker_t = false"
        @confirm="changeConfirm"
      />
    </van-popup>
    <!-- 车辆类别 -->
    <van-popup  v-model="showCategory" round position="bottom">
      <van-picker
        title="请选择车辆类别"
        show-toolbar
        :columns="categoryArr"
        value-key="lable"
        @cancel="showCategory = false"
        @confirm="categoryConfirm"
      />
    </van-popup>
    <!-- 在沈时间 -->
    <van-popup  v-model="leaveTime" round position="bottom">
      <van-picker
        title="请选择在沈时间"
        show-toolbar
        :columns="leaveTimeArr"
        value-key="lable"
        @cancel="leaveTime = false"
        @confirm="categoryConfirm1"
      />
    </van-popup>
    <!-- 来沈时间 -->
    <van-popup  v-model="goIntime" round position="bottom">
      <van-datetime-picker
        @confirm="getConfirm1"
        @cancel="showDate = false"
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate1"
      />
    </van-popup>
  </div>
</template>

<script>
import { createIoToFile, getSstUserInfo, saveCargoTransportationInfo, getSig, getCargoTransportationInfo, getCompanyInfo } from '@/api/gov/home/index'
import axios from 'axios'
import { Toast } from 'vant'
import keyword from '../../components/keyword'
import { areaList } from '@vant/area-data'
import moment from 'moment'
console.log(areaList)
export default {
  components: {
    keyword
  },
  name: 'home',
  data () {
    return {
      isInAndOuts: null, // 1.出沈 2.入沈 3.返沈
      showPicker: false, // 物品卸货区是否显示
      showPicker1: false, // 到沈区区是否显示
      showPickerZ: false, // 物品装货省市是否显示
      goIntime: false, // 来沈时间
      leaveTime: false, // 在沈时间
      showOrigin: false, // 出发地
      showThrough: false, // 途经地
      currentDate: new Date(),
      minDate1: new Date(1990, 1, 1),
      // maxDate: '1990-01-01',
      areaList,
      columns: [
        {
          'code': 'LM00001',
          'name': '和平区'
        },
        {
          'code': 'LM00002',
          'name': '沈河区'
        },
        {
          'code': 'LM00003',
          'name': '大东区'
        },
        {
          'code': 'LM00004',
          'name': '皇姑区'
        },
        {
          'code': 'LM00005',
          'name': '铁西区'
        },
        {
          'code': 'LM00006',
          'name': '浑南区'
        },
        {
          'code': 'LM00007',
          'name': '于洪区'
        },
        {
          'code': 'LM00008',
          'name': '沈北新区'
        },
        {
          'code': 'LM00009',
          'name': '苏家屯区'
        },
        {
          'code': 'LM00010',
          'name': '辽中区'
        },
        {
          'code': 'LM00011',
          'name': '康平县'
        },
        {
          'code': 'LM00012',
          'name': '法库县'
        },
        {
          'code': 'LM00013',
          'name': '新民市'
        }
      ],
      pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
      cardnoexe: /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/,
      cardNo: '',
      keyState: false,
      timestamp: '', // 上传图片时间戳
      checkoutTime: 0, // 选择时间的下标 因为是多条 必须要知道选的是哪条
      showDate: false, // 选择年月日
      minDate: new Date(),
      formData: {
        driver_name: '', // 驾驶员姓名
        driver_cardno: '', // 驾驶员身份证
        driver_tel: '', // 驾驶员手机号码
        verificationCode: '', // 验证码
        quguo_high_risk: '', // 是否去过高风险地区
        hesuan_result: '阴性(2022-04-01 14:00:00)', // 核酸检测结果
        car_number: '', // 车牌号
        dlys: '', // 道路运输
        cheliang_type: '', // 车辆类别
        dlys_no: '', // 道路运输证号
        chepai_color: '', // 车辆车牌颜色
        car_is_ll: '1', // 是否为进口产品
        people_cy_no: '', // 从业资格证号
        arrive_address: '', // 来返沈住址
        arrive_time: '', // 来沈时间
        zssj: '1', // 在沈时间
        origin: '', // 出发地
        cfd_s: '', // 出发地（省）
        cfd_city: '', // 出发地（城市）
        tjd: '', // 途经地
        jck_cyzgz: [], // 从业资格证
        dsq: '', // 到沈区
        goodsList: [
          { // 物品
            ascription_code: '', // 装货卸货区选择
            // goods_name: '', // 物品名称
            goods_pretend: '', // 物品装货地
            goods_pretend_s: '', // 卸货省/市
            // goods_discharge_time: '', // 物品卸货时间
            goods_discharge: '', // 物品卸货地
            receiving_name: '', // 收货人姓名
            receiving_tel: '', // 收货人电话
            receiving_dw: '' // 卸货单位
            // quguo_high_risk: '是', // 是否去过高风险地区
            // hesuan_result: '阴性(2022-04-01 14:00:00)' // 核酸检测结果
          }
        ],
        peerList: [
          { // 同行人
            passenger_name: '', // 同行人姓名
            passenger_cardno: '', // 同行人身份证号
            passenger_tel: '', // 同行人手机号码
            quguo_high_risk: '', // 是否去过高风险地区
            hesuan_result: '阴性(2022-04-01 14:00:00)', // 核酸检测结果
            hesuan_detail: '' // 核酸检测详情
          }
        ],
        coldchainList: [{
          jck_qd: [], // 进出口清单
          jck_jyzm: [], // 进出口检疫检验证明
          hs_zm: [], // 核酸检测证明
          xs_zm: [] // 消杀证明
        }]
      },
      jck_cyzgz: [], // 从业资格证
      jck_qd: [], // 进出口清单
      jck_jyzm: [], // 进出口检疫检验证明
      hs_zm: [], // 核酸检测证明
      xs_zm: [], // 消杀证明
      projectNameValue: '', // input框内显示的值
      projectNameValue1: '', // input框内显示的值
      projectNameValue2: '', // input框内显示的值
      projectListArr: [
        {
          value: '1',
          lable: '蓝色'
        },
        {
          value: '2',
          lable: '黄色'
        },
        {
          value: '3',
          lable: '黑色'
        },
        {
          value: '4',
          lable: '白色'
        },
        {
          value: '5',
          lable: '绿色'
        },
        {
          value: '9',
          lable: '其他'
        }
      ], // 下拉的数据源，从接口中请求到数据，根据需要变成一维数组，只存name
      categoryArr: [
        {
          value: '1',
          lable: '公路客运'
        },
        {
          value: '2',
          lable: '旅游客运'
        },
        {
          value: '3',
          lable: '危化品运输车'
        },
        {
          value: '4',
          lable: '重载普货车辆'
        },
        {
          value: '99',
          lable: '其它普货车辆'
        }
      ],
      leaveTimeArr: [
        {
          value: '1',
          lable: '当天离沈'
        },
        {
          value: '2',
          lable: '在沈过夜'
        }
      ],
      showPicker_t: false, // 弹出层显示隐藏
      showCategory: false // 弹出层显示隐藏 车辆类别
    }
  },
  mounted () {
    console.log(this.areaList, '313')
    this.isInAndOuts = this.$route.query.value
    this.code = this.$route.query.code
    console.log(this.code)
    if (this.$route.query.code) {
      let toast = Toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 10000
      })
      getSstUserInfo({ code: this.$route.query.code }).then(res => {
        if (res.data.data.data.name) this.formData.driver_name = res.data.data.data.name
        if (res.data.data.data.card_no) this.formData.driver_cardno = res.data.data.data.card_no
        if (res.data.data.data.card_no) this.cardNo = res.data.data.data.card_no
        if (res.data.data.data.mobile) this.formData.driver_tel = res.data.data.data.mobile
        console.log('ttt_box', res.data.data.data)
        toast.clear()
        getCargoTransportationInfo({ driver_cardno: res.data.data.data.card_no, arrive_type_one: this.$route.query.value }).then(ret => {
          // 用车牌号查询是入沈还是返沈
          if (this.isInAndOuts != 1) { // 不是出沈时候 判断
            getCompanyInfo({ car_number: ret.data.data.car_number }).then(req => {
              console.log(req, '车牌号改变 判断是否是返沈 入沈')
              // 1.出沈 2.入沈 3.返沈
              this.isInAndOuts = req.data.data.id ? 3 : 2
              console.log(this.isInAndOuts)
            })
          }
          console.log('t', ret)
          if (ret.data.errcode != 0) return
          const fr = ['jck_qd', 'jck_jyzm', 'hs_zm', 'xs_zm', 'jck_cyzgz']
          fr.forEach(i => {
            if (!ret.data.data.coldchainList[0][i]) return
            if (ret.data.data.coldchainList[0][i].indexOf(',') === -1) {
              this[i] = [{ url: ret.data.data.coldchainList[0][i] }]
              ret.data.data.coldchainList[0][i] = [ret.data.data.coldchainList[0][i]]
            } else {
              let images = ret.data.data.coldchainList[0][i].split(',')
              this[i] = images.map(item => {
                return { url: item }
              })
              ret.data.data.coldchainList[0][i] = ret.data.data.coldchainList[0][i].split(',')
            }
          })
          if (ret.data.data.goodsList[0] && ret.data.data.goodsList[0].ascription_code) {
            this.columns.forEach(item => {
              if (ret.data.data.goodsList[0].ascription_code == item.code) {
                ret.data.data.goodsList[0].ascription_code = item.name
              }
            })
          }
          if (ret.data.data.chepai_color) {
            for (var i = 0; i < this.projectListArr.length; i++) {
              if (ret.data.data.chepai_color == this.projectListArr[i].value) {
                this.projectNameValue = this.projectListArr[i]
                this.formData.chepai_color = ret.data.data.chepai_color
                break
              }
            }
          }
          this.formData = ret.data.data
        })
      })
    }
  },
  methods: {
    changeConfirm (val, index) {
      this.projectNameValue = val // 传值
      this.formData.chepai_color = val.value
      this.showPicker_t = false
      console.log(index) // 索引
    },
    categoryConfirm (val, index) {
      this.projectNameValue1 = val // 传值
      this.formData.cheliang_type = val.value
      this.showCategory = false
      console.log(index) // 索引
    },
    categoryConfirm1 (val, index) {
      this.projectNameValue2 = val // 传值
      this.formData.zssj = val.value
      this.leaveTime = false
      console.log(index) // 索引
    },
    // 选择装货区
    onConfirm (value, e) {
      console.log(value, e)
      this.formData.goodsList[0].ascription_code = value.name
      this.showPicker = false
    },
    // 到沈区
    onConfirm1 (value, e) {
      console.log(value, e)
      this.formData.dsq = value.name
      this.showPicker1 = false
    },
    // 选择装货省市
    onConfirmZ (value, e) {
      console.log(value, e)
      this.formData.goodsList[0].goods_pretend = value[1].name
      this.formData.goodsList[0].goods_pretend_s = value[0].name
      this.showPickerZ = false
    },
    // 选择出发地
    onConfirmOrigin (value, e) {
      console.log(value, e)
      this.formData.origin = value[0].name + ',' + value[1].name
      this.formData.cfd_s = value[0].code // 出发地（省）
      this.formData.cfd_city = value[1].code // 出发地（城市）
      this.showOrigin = false
    },
    getKey (val) {
      if (this.formData.car_number.length >= 8 && val != 'delete') {
        return false
      }
      if (val == 'delete') {
        this.formData.car_number = this.formData.car_number.slice(0, this.formData.car_number.length - 1)
      } else {
        this.formData.car_number += val
      }
    },
    confirm (e) {
      this.keyState = false
      if (this.formData.car_number.length >= 5 && this.isInAndOuts != 1) {
        // 车牌号改变 判断是否是返沈 入沈
        console.log(this.formData.car_number)
        getCompanyInfo({ car_number: this.formData.car_number }).then(res => {
          console.log(res, '车牌号改变 判断是否是返沈 入沈')
          console.log(JSON.parse(JSON.stringify(this.isInAndOuts)))
          // 1.出沈 2.入沈 3.返沈
          this.isInAndOuts = res.data.data.id ? 3 : 2
          console.log(this.isInAndOuts)
        })
      }
    },
    // 删除图片
    deleteImage (v, name) {
      console.log(v, name)
      this[name.name].splice(name.index, 1)
      this.formData.coldchainList[0][name.name].splice(name.index, 1)
    },
    // 上传图片
    async afterRead (v, name) {
      let toast = Toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 20000
      })
      console.log(v, name)
      let formdata = new FormData()
      formdata.append('fileName', v.file.name)
      formdata.append('file', v.file)
      formdata.append('filePath', 'hcsjba/img')
      createIoToFile(formdata).then(res => {
        console.log(res, '华山')
      })
      var imgs = v.content.replace(/^data:image\/\w+;base64,/, '')
      var timestamp = (new Date()).valueOf()
      console.log(v.file.name, timestamp)
      this.timestamp = timestamp
      const res = await getSig({
        fileName: v.file.name,
        filePath: 'hcsjba/img',
        timestamp
      })
      axios.post(`${res.data.data.docking_url}`, {
        sign: res.data.data.sign,
        file: imgs,
        fileName: v.file.name,
        filePath: 'hcsjba/img',
        timestamp
      }).then(res => {
        this.formData.coldchainList[0][name.name].push(res.data.data)
        console.log(this.formData.coldchainList[name.name])
        toast.clear()
      })
    },
    checkoutTimeChange (index) {
      this.showDate = true
      this.checkoutTime = index
    },
    // 追加人员信息
    addPeople () {
      this.formData.peerList.push({
        passenger_name: '', // 同行人姓名
        passenger_cardno: '', // 同行人身份证号
        passenger_tel: '', // 同行人手机号码
        quguo_high_risk: '是', // 是否去过高风险地区
        hesuan_result: '阴性(2022-04-01 14:00:00)' // 核酸检测结果
      })
    },
    // 删除追加人员信息
    removePeople (index) {
      console.log(index, '删除')
      this.formData.peerList.splice(index, 1)
    },
    // 追加物品信息
    addInfo () {
      this.formData.goodsList.push({
        // goods_name: '', // 物品名称
        goods_pretend: '', // 物品装货地
        // goods_discharge_time: '', // 物品卸货时间
        goods_discharge: '', // 物品卸货地
        receiving_name: '', // 收货人姓名
        receiving_tel: '', // 收货人电话
        receiving_dw: '' // 卸货单位
        // quguo_high_risk: '是', // 是否去过高风险地区
        // hesuan_result: '阴性(2022-04-01 14:00:00)' // 核酸检测结果
      })
    },
    // 删除追加物品信息
    removeInfo (index) {
      console.log(index, '删除')
      this.formData.goodsList.splice(index, 1)
    },
    // 获取卸货时间
    getConfirm (value) {
      console.log(value)
      let yy = new Date(value).getFullYear()
      let mm = new Date(value).getMonth() + 1
      let dd = new Date(value).getDate()
      let hh = new Date(value).getHours()
      this.formData.goodsList[this.checkoutTime].goods_discharge_time = yy + '-' + mm + '-' + dd + ' ' + (hh < 10 ? '0' : '') + hh + ':00:00'
      this.showDate = false
    },
    // 来沈时间
    getConfirm1 (value) {
      console.log(value)
      this.formData.arrive_time = moment(value).format('YYYY-MM-DD')
      this.goIntime = false
    },
    // 身份证号改变时触发
    getUserInfo () {
      var reg = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/
      const flag = reg.test(this.formData.driver_cardno)
      if (flag) {
        // 身份证号填写正确 获取用户数据
      }
    },
    // 根据手机号 身份证号 验证码获取是否去过高风险地区
    getRisk () {
      console.log(this.formData.verificationCode, '验证码')
    },
    // 核酸检测数据
    getNucleicAcid () {
      console.log('获取核酸监测数据')
    },
    async onSubmit () {
      let toast = Toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 10000
      })

      const fr = ['jck_qd', 'jck_jyzm', 'hs_zm', 'xs_zm', 'jck_cyzgz']
      fr.forEach(i => {
        if (!this.formData.coldchainList[0][i] || typeof this.formData.coldchainList[0][i] == 'string') return
        this.formData.coldchainList[0][i] = this.formData.coldchainList[0][i].join(',')
      })

      // 入沈还是出沈
      this.formData.arrive_type_one = this.$route.query.value
      let fd = JSON.parse(JSON.stringify(this.formData))
      // 卸货区 装货区转换
      this.columns.forEach(res => {
        if (fd.goodsList[0] && res.name == fd.goodsList[0].ascription_code) {
          fd.goodsList[0].ascription_code = res.code
        }
      })
      // 人员必须移除
      fd.peerList.forEach((i, index) => { for (var y in i) { if (!i[y]) { return fd.peerList.splice(index, 1) } } })
      // 物品 入沈 出沈 如果数组内对象为空的话 删除对象字段
      if (this.isInAndOuts != 3) {
        fd.goodsList.forEach((i, index) => { for (var y in i) { if (!i[y]) { return fd.goodsList.splice(index, 1) } } })
      }
      console.log(fd, '备案')
      if (this.isInAndOuts == 1) { // 出沈需要删除 字段
        delete fd.car_is_ll
      }
      debugger
      const res = await saveCargoTransportationInfo(fd)
      console.log(res)
      if (res.data.errcode !== 0) return Toast.fail(res.data.errmsg)
      toast.clear()
      Toast.success('备案成功')
      this.cardNo = JSON.parse(JSON.stringify(this.formData.driver_cardno))
      this.formData = {
        driver_name: '', // 驾驶员姓名
        driver_cardno: '', // 驾驶员身份证
        driver_tel: '', // 驾驶员手机号码
        car_number: '', // 车牌号
        dlys_no: '', // 道路运输证号
        chepai_color: '', // 车辆车牌颜色
        goodsList: [{ // 物品
          goods_pretend_s: '', // 省市
          // goods_name: '', // 物品名称
          goods_pretend: '', // 物品装货地市
          // goods_discharge_time: '', // 物品卸货时间
          goods_discharge: '', // 物品卸货地
          receiving_name: '', // 收货人姓名
          receiving_tel: '', // 收货人电话
          receiving_dw: '' // 卸货单位
        }],
        peerList: [{ // 同行人
          passenger_name: '', // 同行人姓名
          passenger_cardno: '', // 同行人身份证号
          passenger_tel: '' // 同行人手机号码
        }],
        coldchainList: [{
          jck_qd: [], // 进出口清单
          jck_jyzm: [], // 进出口检疫检验证明
          hs_zm: [], // 核酸检测证明
          xs_zm: [] // 消杀证明
        }]
      }
      this.jck_qd = [] // 进出口清单
      this.jck_jyzm = [] // 进出口检疫检验证明
      this.hs_zm = [] // 核酸检测证明
      this.xs_zm = [] // 消杀证明
      this.jck_cyzgz = [] // 从业资格证
    }
  }
}
</script>
<style lang="less" scoped>
.home {
  width: 100%;
  overflow-x: hidden;
  .btn{
    height: 80px;
    background: #f1f3f4;
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    span{
      margin-left: 10px;
      vertical-align: middle;
    }
  }
  img{
    width: 100%;
  }
  .dialog-container{
    height: 70vh;
    overflow-y: auto;
  }
  .get-area{
    width: 100%;
    padding: 0 0.8rem;
    font-size: 0.747rem;
    color: #fff;
    background-color: #1989fa;
    border: 0.053rem solid #1989fa;
    height: 2.347rem;
    line-height: 2.347rem;
    text-align: center;
    border-radius: 0.107rem;
    cursor: pointer;
    box-sizing: border-box;
    margin-right: 10px;
  }
  /deep/.van-field__label{
    width: 9em;
    display: flex;
    align-items: center;
  }
  /deep/.van-field__error-message{
    text-align: right;
  }
  .title{
    text-indent: 20px;
    padding: 50px 0 20px;
  }
  .container{
    width: 90%;
    height: 80vh;
    overflow-y: auto;
    border: 1px solid #adadad;
    margin: auto;
    .item{
      margin: 10px;
    }
  }
}
.prompt{
  display: block;
  font-size: 28px;
  color: red;
  text-align: center;
  margin-bottom: 10px;
}
.uploaderOut{
  height: 6rem;
  .bottom{
    width: 690px;
    margin: 0 auto;
    border-bottom: 1px solid #ebedf0;
  }
}
.addressOut{
  width: 690px;
  margin: 0 auto;
  height: 800px;
  overflow-y: auto;
  //overflow-x: hidden;
  display: flex;
  flex-wrap: wrap;
  padding: 20px 0;
  .titleArea{
    background-color: #EEEEEE;
    font-size: 24px;
    text-align: center;
    padding: 8px;
    border-radius: 10px;
    margin: 8px;
  }
  //background-color: blue;
}
</style>
